<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    <div class="app">
        <h1>这是 - {{title}}</h1>
        <input type="button" @click="fn" value="按钮">
        <p>{{msg}}</p>
        <p>{{data.name}}</p>
        <p>{{data.age}}</p>
        <p><input type="text" v-model="data.name">{{data}}</p>
        <p><input type="text" v-model="data.child.name">{{data}}</p>
        <p><input type="text" v-model="people.name">{{people}}</p>
        <p><input type="text" v-model="people.child.name">{{people}}</p>
    </div>
</body>
<script src="../vue.global.js"></script>
<script>
    const { createApp, ref, reactive, isRef, unref,  shallowReactive } = Vue;

    createApp({
        setup(){
            // 静态数据
            let title = "组合式API";
            // 响应式基本数据：ref 数据，修改时必须要通过ref数据的value属性修改，才能触发响应式
            const msg = ref("hello world");
            // 响应式复杂数据：reactive数据，正常使用和修改其内部的属性即可
            const data = reactive({
                name:"张三",
                age:18,
                child:{
                    name:"张四"
                }
            })
            // 只能监听到顶层数据变化的响应式数据
            const people = shallowReactive({
                name:"李四",
                child:{
                    name:"李五"
                }
            })

            function fn(){
                title = "hello composition";
                msg.value = "你好";

                data.name = "李四";
                data.age++;

                console.log( isRef(title) );
                console.log( isRef(msg) );
                console.log( isRef(data) );

                // 工具类API
                console.log( isRef(title) ? title.value : title );
                console.log( unref(title) )

                console.log(data);
                console.log(msg);
                console.log(title);
            }

            return { title, fn, msg, data, people }

        }
    }).mount(".app");

</script>
</html>